import CommonDrawer from '@/components/CommonDrawer';
import useMaterial from '@/hooks/useMaterial';
import request from '@/utils/request';
import { Descriptions, Space, Table } from 'antd';
import dayjs from 'dayjs';
import { useEffect, useState } from 'react';

const Detail = (props) => {
  const { open, record, onCancel } = props;
  const { materialTypeMap } = useMaterial();
  const [detailData, setDetailData] = useState();
  const handleExport = async () => {
    const res = await request({
      url: '/datas/vehicle/task/export/list',
      method: 'GET',
      params: {
        ids: [record.lineTaskId],
      },
    });
    if (res) {
      window.open(res);
    }
  };
  useEffect(() => {
    (async () => {
      const data = await request({
        url: '/datas/line/task/detail',
        method: 'GET',
        params: { lineTaskId: record.lineTaskId },
      });
      setDetailData(data);
    })();
  }, []);

  // 格式化数据用于展示
  const formatData = (data) => {
    if (!data) return {};

    return {
      ...data,
      day: data.day ? dayjs(data.day).format('YYYY-MM-DD') : '-',
      type: materialTypeMap[data.type] || '-',
      backhauls: data.backhauls === 0 ? '否' : '是',
      remark: data.remark || '-',
    };
  };

  const formattedRecord = formatData(record);

  const items = [
    {
      key: 'day',
      label: '计划日期',
      children: formattedRecord.planDate,
    },
    {
      key: 'lineId',
      label: '计划线路',
      children: record?.lineName || record?.lineId || '-',
    },
    // {
    //   key: 'type',
    //   label: '物料类型',
    //   children: formattedRecord.type,
    // },

    {
      key: 'total',
      label: '计划趟次数',
      children: formattedRecord.trips || '-',
    },
    {
      key: 'lineId',
      label: '回货线路',
      children: record?.backLineName || record?.lineId || '-',
    },

    {
      key: 'total',
      label: '回货趟次数',
      children: formattedRecord.backTrips || '-',
    },
    {
      key: 'remark',
      label: '备注',
      children: formattedRecord.remark,
    },
  ];
  return (
    <CommonDrawer
      title="计划详情"
      open={true}
      onClose={onCancel}
      width={800}
      destroyOnHidden
      footer={null}
    >
      <h3>
        <Space>
          <span>计划信息</span>
          {/* <Button type="primary" onClick={handleExport}>
            导出
          </Button> */}
        </Space>
      </h3>
      <Descriptions
        items={items}
        column={2}
        bordered
        size="middle"
        labelStyle={{
          fontWeight: 'bold',
          width: '120px',
          textAlign: 'right',
        }}
        contentStyle={{
          minHeight: '32px',
          padding: '8px 12px',
        }}
      />
      <Table
        style={{ marginTop: '8px' }}
        bordered
        rowKey="vehicleId"
        scroll={{ x: 1160 }}
        columns={[
          {
            title: '组织',
            dataIndex: 'groupName',
            width: 200,
          },
          {
            title: '车牌号',
            dataIndex: 'license',
            width: 200,
          },
          {
            title: '驾驶员',
            dataIndex: 'realname',
            width: 200,
          },
          {
            title: '回货',
            dataIndex: 'backhaul',
            width: 100,
            render: (text) => {
              return {
                0: '否',
                1: '是',
              }[text];
            },
          },
          {
            title: '当前运营线路',
            width: 280,
            dataIndex: 'lineName',
          },
          {
            title: '运营状态',
            dataIndex: 'state',
            width: 100,
            render: (text) => {
              return text === 0 ? '停运' : '运营中';
            },
          },
          {
            title: '距离装货地距(km)',
            dataIndex: 'distance',
            width: 140,
            editable: false,
          },
        ]}
        dataSource={detailData?.tasks}
        pagination={false}
      />
    </CommonDrawer>
  );
};

export default Detail;
